<template>
  <div class="ewe-delivery-list-view">
    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <div class="search-row">
        <div class="search-item">
          <label>分娩日期</label>
          <div class="date-range">
            <el-date-picker v-model="page.StartEwedeliveryTime" type="date" placeholder="开始日期" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" size="default" />
            <span class="date-separator">至</span>
            <el-date-picker v-model="page.EndEwedeliveryTime" type="date" placeholder="结束日期" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" size="default" />
          </div>
        </div>
        <div class="search-item">
          <label>种母耳号</label>
          <el-input v-model="page.EwedeliverySnowId" placeholder="请输入种母耳号" clearable />
        </div>
        <div class="search-item">
          <label>转入栋舍</label>
          <el-select v-model="page.EwedeliveryTransferhouse" placeholder="请选择转入栋舍" clearable>
            <el-option label="大羊舍" value="big_sheep_barn" />
            <el-option label="配种舍" value="mating_barn" />
            <el-option label="采购羊栋舍" value="purchased_sheep_barn" />
          </el-select>
        </div>
        <div class="search-item">
          <label>窝号</label>
          <el-input v-model="page.EwedeliveryWoHao" placeholder="请输入窝号" clearable />
        </div>
        <div class="search-item">
          <label>负责人</label>
          <el-select v-model="page.ResponsibleFor" placeholder="请选择">
            <el-option label="海绵宝宝" value="海绵宝宝" />
            <el-option label="派大星" value="派大星" />
            <el-option label="蟹老板" value="蟹老板" />
          </el-select>
        </div>
        <div class="search-actions">
          <el-button type="primary" @click="handleSearch" :icon="Search">
            查询
          </el-button>
          <el-button @click="handleReset" :icon="Refresh">
            重置
          </el-button>
          <el-button @click="toggleFilterPanel" :icon="ArrowUp">
            收起
          </el-button>
        </div>
      </div>
    </div>

    <!-- 操作工具栏 -->
    <div class="toolbar-section">
      <div class="toolbar-left">
        <el-button type="primary" @click="handleAddNew" :icon="Plus">
          新增
        </el-button>
        <el-button type="danger" @click="" :icon="Delete" :disabled="selectedRows.length === 0">
          删除
        </el-button>
        <el-button type="warning" @click="" :icon="User" :disabled="selectedRows.length === 0">
          审核
        </el-button>
        <div class="selection-info">
          <el-icon class="info-icon">
            <InfoFilled />
          </el-icon>
          <span>已选择{{ selectedRows.length }}项</span>
        </div>
      </div>
      <div class="toolbar-right">
        <el-icon class="toolbar-icon" @click="handleRefresh">
          <Refresh />
        </el-icon>
        <el-icon class="toolbar-icon" @click="handleSettings">
          <Setting />
        </el-icon>
        <el-icon class="toolbar-icon" @click="handleFilter">
          <Filter />
        </el-icon>
        <el-icon class="toolbar-icon" @click="handleMore">
          <More />
        </el-icon>
      </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <el-table :data="tableData" border stripe style="width: 100%" @selection-change="handleSelectionChange"
        @sort-change="handleSortChange" element-loading-text="加载中...">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" align="center">
          <template #default="{ $index }">
          </template>
        </el-table-column>
        <el-table-column prop="ewedeliverySnowId" label="种母耳号" width="120" />
        <el-table-column prop="ewedeliveryTime" label="分娩日期" width="120" sortable="custom">
          <template v-slot="scope">
            {{ moment(scope.row.ewedeliveryTime).format('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column prop="ewedeliveryDayNum" label="妊娠天数" width="100" />
        <el-table-column prop="ewedeliveryDifficulty" label="分娩难易" width="120">
          <template v-slot="scope">
            <el-tag v-if="scope.row.ewedeliveryDifficulty == true" type="success">顺产</el-tag>
            <el-tag v-else type="danger">难产</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ewedeliveryMamhood" label="母性" width="100" />
        <el-table-column prop="ewedeliveryLactation" label="泌乳" width="100" />
        <el-table-column prop="ewedeliveryMastitis" label="乳房炎" width="100" />
        <el-table-column prop="ewedeliveryHealthy" label="健羔数" width="100" />
        <el-table-column prop="ewedeliveryLamb" label="弱羔数" width="100" />
        <el-table-column prop="ewedeliveryDeformities" label="畸形数" width="100" />
        <el-table-column prop="ewedeliveryStillbirths" label="死胎数" width="100" />
        <el-table-column prop="ewedeliveryMummies" label="木乃伊数" width="100" />
        <el-table-column prop="ewedeliveryWoHao" label="窝号" width="120" />
        <el-table-column prop="ewedeliverySex" label="性别" width="100">
          <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.ewedeliverySex == '公'">公</el-tag>
            <el-tag v-else type="danger">母</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <!-- 分页区域 -->
    <div class="pagination-section">
      <div class="pagination-info">
        <!-- <span>当前为第{{ pagination.currentPage }}页共{{ pagination.totalPages }}页{{ pagination.total }}条数据</span> -->
        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
          :page-sizes="[1, 2, 3, 4]" :size="page.pageSize" :background="page.totalCount"
          layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Delete,
  User,
  Search,
  Refresh,
  Setting,
  Filter,
  More,
  InfoFilled,
  ArrowUp
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { Reads, Writes } from '@/Utils/axiosHelper';
import { watch } from 'vue';
const router = useRouter()
import moment from 'moment'

// 响应式数据
const searchForm = reactive({

})
const tableData = ref([])
const selectedRows = ref([])

const page = reactive({
  pageIndex: 1,
  pageSize: 5,
  totalCount: 0,
  totalPage: 0,
  StartEwedeliveryTime: '',
  EndEwedeliveryTime: '',
  EwedeliverySnowId: '',
  EwedeliveryTransferhouse: '',
  EwedeliveryWoHao: '',
  ResponsibleFor: ''
})


// 负责人选项
const responsiblePersons = ref([
  { label: '张三', value: 'zhangsan' },
  { label: '李四', value: 'lisi' },
  { label: '王五', value: 'wangwu' }
])


// 初始化
onMounted(() => {
  loadData()
})
// 加载数据
const loadData = async () => {
  Reads.get("Management/GetDelivery", {
    params: page
  })
    .then(res => {
      tableData.value = res.data.data.data

      page.totalCount = res.data.data.totalCount
      page.totalPage = res.data.data.totalPage
    })
}
watch(page, () => {
  loadData()
}, { deep: true })
// 搜索处理
const handleSearch = () => {
  loadData()
}
// 重置处理
const handleReset = () => {
  Object.assign(page, {
    StartEwedeliveryTime: '',
    EndEwedeliveryTime: '',
    EwedeliverySnowId: '',
    EwedeliveryTransferhouse: '',
    EwedeliveryWoHao: '',
    ResponsibleFor: ''
  })
  loadData()
}

// 新增处理
const handleAddNew = () => {
  router.push('EweEwedelivery')
}




// 表格选择变化处理
const handleSelectionChange = (selection: any) => {
  selectedRows.value = selection
}

// 排序处理
const handleSortChange = ({ prop, order }: { prop: string, order: string }) => {
  console.log('Sort by:', prop, order)
  loadData()
}

// 编辑处理
const handleEdit = (row: any) => {
  ElMessage.info(`编辑记录: ${row.eweEarTag}`)
}


// 刷新处理
const handleRefresh = () => {
  loadData()
}

// 设置处理
const handleSettings = () => {
  ElMessage.info('打开设置')
}

// 筛选处理
const handleFilter = () => {
  ElMessage.info('打开筛选')
}

// 更多操作处理
const handleMore = () => {
  ElMessage.info('更多操作')
}

// 切换筛选面板
const toggleFilterPanel = () => {
  ElMessage.info('收起筛选面板')
}
// 工具函数
const formatDate = (dateStr: string): string => {
  if (!dateStr) return '-'
  return dateStr
}

const getDeliveryDifficultyText = (difficulty: string): string => {
  const difficultyMap: { [key: string]: string } = {
    'easy': '容易',
    'normal': '一般',
    'difficult': '困难',
    'dystocia': '难产'
  }
  return difficultyMap[difficulty] || difficulty
}

const getGenderText = (gender: string): string => {
  const genderMap: { [key: string]: string } = {
    'male': '公',
    'female': '母',
    'mixed': '混合'
  }
  return genderMap[gender] || gender
}
</script>

<style scoped>
.ewe-delivery-list-view {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 搜索区域 */
.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.search-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}

.search-item label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-separator {
  color: #666;
  font-size: 14px;
}

.search-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* 工具栏区域 */
.toolbar-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.info-icon {
  color: #f56c6c;
  font-size: 16px;
}

.toolbar-right {
  display: flex;
  gap: 15px;
}

.toolbar-icon {
  font-size: 18px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
}

.toolbar-icon:hover {
  color: #409eff;
}

/* 表格区域 */
.table-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.column-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-icon {
  font-size: 12px;
  color: #999;
}

/* 分页区域 */
.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-size-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #666;
  font-size: 14px;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 8px 0;
}

:deep(.el-table .el-table__empty-text) {
  color: #999;
  font-size: 14px;
}

/* 按钮样式 */
:deep(.el-button--primary) {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

:deep(.el-button--primary:hover) {
  background-color: #f78989;
  border-color: #f78989;
}

:deep(.el-button--danger) {
  background-color: #ff9ff3;
  border-color: #ff9ff3;
}

:deep(.el-button--danger:hover) {
  background-color: #ffb3f7;
  border-color: #ffb3f7;
}

:deep(.el-button--warning) {
  background-color: #ff9ff3;
  border-color: #ff9ff3;
}

:deep(.el-button--warning:hover) {
  background-color: #ffb3f7;
  border-color: #ffb3f7;
}

/* 分页样式 */
:deep(.el-pagination .el-pager li.active) {
  background-color: #f56c6c;
  color: white;
}

:deep(.el-pagination .el-pager li:hover) {
  color: #f56c6c;
}

/* 选择器样式 */
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 1px #f56c6c inset;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-item {
    min-width: 100%;
  }

  .search-actions {
    margin-left: 0;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .ewe-delivery-list-view {
    padding: 10px;
  }

  .toolbar-section {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .toolbar-left {
    justify-content: center;
    flex-wrap: wrap;
  }

  .toolbar-right {
    justify-content: center;
  }

  .pagination-section {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .pagination-info {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}
</style>
